<template>
	<jk-dialog
		v-model="showDialog"
		title="详情-人员替岗"
		width="1100px"
		:show-content-loading="showLoading"
		append-to-body
		:show-confirm-btn="false"
		:show-close-btn="true"
		:show-cancel-btn="false"
		@on-close="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" :show-message="false">
			<div ref="box1">
				<el-tag effect="plain">
					<div class="el-icon-user item-gap"></div>
					<span>原值班人</span>
				</el-tag>
				<el-row>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="区域">
							<span class="read-only-2">{{ ruleForm.workshopName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="替岗起始时间">
							<span class="read-only-2">{{ ruleForm.replaceTime }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="班次">
							<span class="read-only-2">{{ ruleForm.shiftName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="班组">
							<span class="read-only-2">{{ ruleForm.groupName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="原值班人">
							<span class="read-only-2">{{ ruleForm.oldEmpName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="岗位">
							<span class="read-only-2">{{ ruleForm.postName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="退岗原因">
							<span class="read-only-2">{{ ruleForm.scheduleEmpExceptionalCaseName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="16">
						<el-form-item class="margin-bottom-10" label="备注">
							<span class="read-only-2">{{ ruleForm.remark }}</span>
						</el-form-item>
					</el-col>
				</el-row>
			</div>
			<div ref="box2">
				<el-tag effect="plain">
					<div class="el-icon-user-solid item-gap"></div>
					<span>新值班人</span>
				</el-tag>
				<el-row>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="新值班人">
							<span class="read-only-2">{{ ruleForm.newEmpName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="上岗时间">
							<span class="read-only-2">{{ ruleForm.replaceTime }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="下岗时间">
							<span class="read-only-2">{{ ruleForm.endTime }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="margin-bottom-10" label="替岗工时">
							<span class="read-only-2">{{ ruleForm.replaceHours }}</span>
						</el-form-item>
					</el-col>
				</el-row>
			</div>
			<el-row>
				<el-col :span="24">
					<span class="table-title">接替机台</span>
					<jk-table
						:row-style="(e) => rowClassName(e, selectNewMachineData)"
						:radio-config="{trigger: 'row'}"
						:data="scheduleNewEmpMachineList"
						:height="dialogTableHeight - 20"
					>
						<vxe-column title="机台编号" align="left" field="machineCode" :min-width="120" />
						<vxe-column title="机台名称" align="left" field="machineName" :min-width="120" />
					</jk-table>
				</el-col>
			</el-row>
		</el-form>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import {
        workforceManagementScheduleReplacePostGet
    } from '../../../api/schedule/empReplacePost';
    import remoteSearchEmpInput from '../../production/order/components/remote-search-emp-input';
    export default {
        name: 'EmpReplacePost',
        props: {
            // 页面权限的前缀
            permissionPrefix: {
                type: String,
                default: ''
            },
            dialogState: {
                type: Boolean,
                default: false
            },
            dataId: {
                type: [String, Number],
                default: ''
            }
        },
        components: {
            remoteSearchEmpInput
        },
        mixins: [calHeight],
        data() {
            return {
                showDialog: false,
                showLoading: true,
                ruleForm: {},
                rules: {},
                selectNewMachineData: [],
                scheduleNewEmpMachineList: []
            };
        },
        methods: {
            rowClassName({ row }, selectOldMachineData) {
                if (row.machineId === selectOldMachineData.machineId) {
                    return {
                        backgroundColor: '#19be6b',
                        color: '#fff'
                    };
                }
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
            },
            getDetailRequest() {
                return workforceManagementScheduleReplacePostGet({ id: this.dataId }).then(res => {
                    if (res.data.status === 200) {
                        this.ruleForm = res.data.res;
                        this.scheduleNewEmpMachineList = res.data.res.replacePostMachineList;
                    }
                });
            },
            async getDependentData() {
                this.showLoading = true;
                if (this.dataId) await this.getDetailRequest();
                this.showLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        }
    };
</script>
<style scoped lang="scss">
.table-title {
    font-size: 14px;
}
.arrow-operation-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>
